import React, { useEffect, useState, useRef } from 'react';
import { useSewTask } from 'dw-mx-sew';
import { request } from 'dw-mx-request';

export default function BpmnInfo(props) {
    // 流程任务
    const sewTask = useSewTask();
    const processVars = sewTask.getProcessVars();

    const [bpmnDiagram, setBpmnDiagram] = useState(null);

    useEffect(() => {
        viewBpmnDiagram();
    }, []);

    const viewBpmnDiagram = async () => {
        const dpmnDiagramSrc = await request('/mx/SEWEngine/viewBpmnDiagram', { piid: processVars.getPiid() });
        setBpmnDiagram(dpmnDiagramSrc.result_message.bpmndiagram.bpmndiagram);
        document.getElementById('bpmnDiagram').setAttribute('src', 'data:image/png;base64,' + dpmnDiagramSrc.result_message.bpmndiagram.bpmndiagram);
    };

    const callback = async () => {};

    return bpmnDiagram ? (
        <>
            <div style={{ height: 550, width: '100%', overflowX: 'auto', overflowY: 'auto' }}>
                <img id={'bpmnDiagram'} />
            </div>
        </>
    ) : (
        <div style={{ height: 550 }}>
            <div>Loading......</div>
        </div>
    );
}
